import React, { Component } from 'react'
import './Header.css'

export default class Header extends Component {
  state = {
    value: ""
  }
  render() {
    return (
      <div className="Header">
        <input type="text" className="input" placeholder="请输入要添加的任务列队" onInput={this.handleInput} value={this.state.value} />
        <button className="button" onClick={this.addList}>添加任务列队</button>
      </div>
    )
  }

  /**
   * 文本框输入事件
   * @param {object} e - input事件返回的event
   */
  handleInput = (e) => {
    this.setState({ value: e.target.value })
  }

  /**
   * 点击添加任务列队
   * @returns {function}
   */
  addList = () => {
    if (!this.state.value) return alert('不可以输入名字为空的任务队列')
    this.setState({ value: "" })
    this.$pubsub.publish('Header_addList', this.state.value)  // 消息发布
  }
}
